<?php
require_once 'config.php';
$timerData = getTimerData();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红方控制</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fee2e2;
        }
        .circle-btn {
            width: 80vmin;
            height: 80vmin;
            border-radius: 50%;
            background-color: #ef4444;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 10vmin;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(239, 68, 68, 0.5);
            transition: all 0.1s;
            border: none;
        }
        .circle-btn:active {
            transform: scale(0.95);
        }
        .score-display {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 8vmin;
            color: #b91c1c;
            font-weight: bold;
        }
        .connection-status {
            position: absolute;
            top: 80px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 4vmin;
            color: #666;
        }
        .connected { color: #10b981; }
        .disconnected { color: #ef4444; }
    </style>
</head>
<body>
    <div class="score-display" id="score-display">红方: <?php echo $timerData['red_score']; ?>分</div>
    <div class="connection-status" id="connection-status">连接中...</div>
    
    <button class="circle-btn" onclick="addRedScore(1)">红方+1</button>

    <script>
        const API_URL = 'api.php';
        let redScore = <?php echo $timerData['red_score']; ?>;

        window.addEventListener('load', function() {
            fetchData();
            setInterval(fetchData, 2000);
        });

        function fetchData() {
            fetch(API_URL + '?action=get_data&t=' + Date.now())
                .then(response => response.json())
                .then(data => {
                    if (data?.success) {
                        redScore = data.data.red_score;
                        updateScoreDisplay();
                        setConnected(true);
                    }
                })
                .catch(error => {
                    setConnected(false);
                });
        }

        function addRedScore(points) {
            fetch(API_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=add_red&points=' + points
            })
            .then(response => response.json())
            .then(data => {
                if (data?.success) {
                    redScore = data.data.red_score;
                    updateScoreDisplay();
                }
            });
        }

        function updateScoreDisplay() {
            document.getElementById('score-display').textContent = `红方: ${redScore}分`;
        }

        function setConnected(connected) {
            const statusEl = document.getElementById('connection-status');
            statusEl.textContent = connected ? '已连接' : '连接断开';
            statusEl.className = `connection-status ${connected ? 'connected' : 'disconnected'}`;
        }
    </script>
</body>
</html>